<style>
#selectable .unselect { background: None; }
#selectable .selected { background: #F39814; color: white; }
#selectable { list-style-type: none;}
</style>
	<script>
	$(function()
	{
		$('#nganhloading').hide();
		$('#monloading').hide();
		$('.khoa li').click(function(){
									$(this).addClass('selected');
									$(this).siblings().removeClass('selected');
									$(this).siblings().addClass('unselected');
									$.ajax({
										url:<?php echo "'".$this->webroot."monthamgianhoms/capnhatnganh/'"?> + $(this).prop('id'),
										type:'get',
										datatype:'html',
										success : function(html)
													{
														$('#div_nganh').html(html);
														$('#nganhloading').hide();
														//alert(html);
														setTimeout(update, 1000 * 10 *60 );										
													},
										beforeSend: function(){
																$('#nganhloading').show();
															}
									});

									$.ajax({
										url:<?php echo "'".$this->webroot."monthamgianhoms/capnhatmon/'"?> + '0' + '/' + $('#khoahoc').val() +'/'+ $(this).prop('id'),
										type:'get',
										datatype:'html',
										success : function(html)
													{
														$('#mon').html(html);
														$('#monloading').hide();
														setTimeout(update, 1000 * 10 *60 );										
													},
													beforeSend: function(){
														$('#monloading').show();
													}
									});
								});

		$('#khoahoc').change(function(){
			$.ajax({
				url:<?php echo "'".$this->webroot."monthamgianhoms/capnhatmon/'"?> + $('.nganh').find(' .selected').prop('id') + '/' + $('#khoahoc').val(),
				type:'get',
				datatype:'html',
				success : function(html)
							{
								$('#mon').html(html);
								$('#monloading').hide();
								setTimeout(update, 1000 * 10 *60 );										
							},
							beforeSend: function(){
								$('#monloading').show();
							}
			});
		});
		
		$('.nganh li').live('click',function(){
			$(this).addClass('selected');
			$(this).siblings().removeClass('selected');
			$(this).siblings().addClass('unselected');
			
			$.ajax({
				url:<?php echo "'".$this->webroot."monthamgianhoms/capnhatmon/'"?> + $(this).prop('id') + '/' + $('#khoahoc').val(),
				type:'get',
				datatype:'html',
				success : function(html)
							{
								$('#mon').html(html);
								$('#monloading').hide();
								setTimeout(update, 1000 * 10 *60 );										
							},
							beforeSend: function(){
								$('#monloading').show();
							}
			});
		});
		
	});
	
	
	</script>
<table>
<tr>
<td>
	<ol id="selectable" class='khoa'>
		<?php
		foreach ($khoas as $key=>$khoa):?>
		<li class='' id='<?php echo $key?>'><?php echo $khoa?></li>
		<?php endforeach;?>
	</ol>
</td>
<td>
<?php echo $html->image($this->webroot.'img/throbber.gif',array('id'=>'nganhloading'))?>
	<div id='div_nganh'>
		<ol id="selectable" class='nganh'>
			<?php
			foreach ($nganhs as $key=>$nganh):?>
			<li class='' id='<?php echo $key?>'><?php echo $nganh?></li>
			<?php endforeach;?>
		</ol>
	</div>
</td>
</tr>
<tr>
<td>
<?php echo $form->input('khoahoc',array('id'=>'khoahoc','label'=>'Khóa học','type'=>'select','options'=>$khoahoc));?>
</td>
</tr>
</table>
<?php echo $html->image($this->webroot.'img/throbber.gif',array('id'=>'monloading'))?>
<div id='mon'>
</div>


